<script setup>
import { ref, onMounted } from 'vue';
import { getOverviewData } from '../api/auth';
import { useActivityStore } from '@/stores/activity';

// 首页概览数据
const overviewData = ref({
  clueTotal: 0,
  clueWaitAllot: 0,
  clueWaitFollow: 0,
  clueFollowing: 0,
  clueFalse: 0,
  clueConvertBusiness: 0,
  businessTotal: 0,
  businessWaitAllot: 0,
  businessWaitFollow: 0,
  businessFollowing: 0,
  businessFalse: 0,
  businessConvertCustomer: 0
});

// 加载状态
const loading = ref(false);

// 错误信息
const errorMessage = ref('');

// 获取首页数据
const fetchOverviewData = async () => {
  loading.value = true;
  errorMessage.value = '';
  try {
    const response = await getOverviewData();
    if (response.code === 1) {
      overviewData.value = response.data;
    } else {
      errorMessage.value = response.msg || '获取数据失败';
    }
  } catch (error) {
    errorMessage.value = '网络错误，请稍后重试';
  } finally {
    loading.value = false;
  }
};

// 组件挂载时获取数据
onMounted(async () => {
  fetchOverviewData();
  // 初始化活动数据
  const activityStore = useActivityStore();
  await activityStore.initializeActivities();
});
</script>

<template>
  <div class="home-view">
        <div class="page-header">
          <h2>欢迎您, 进入轻客管家系统</h2>
          <div v-if="errorMessage" class="error-message">
            {{ errorMessage }}
          </div>
        </div>

        <!-- 数据概览区域 -->
        <div class="dashboard-section">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card shadow="hover" class="overview-card">
                <template #header>
                  <div class="card-title">线索概览</div>
                </template>
                <el-row :gutter="10">
                  <el-col
                    :span="8"
                    v-for="(item, index) in [
                      { label: '总线索数', value: overviewData.clueTotal },
                      { label: '待分配线索数', value: overviewData.clueWaitAllot },
                      { label: '待跟进线索数', value: overviewData.clueWaitFollow },
                      { label: '跟进中线索数', value: overviewData.clueFollowing },
                      { label: '伪线索数', value: overviewData.clueFalse },
                      { label: '转商机线索数', value: overviewData.clueConvertBusiness },
                    ]"
                    :key="index"
                  >
                    <div class="stat-item">
                      <div class="stat-value">
                        <el-skeleton v-if="loading" animated :rows="1" style="width: 50%; margin: 0 auto;"></el-skeleton>
                        <span v-else>{{ item.value }}</span>
                      </div>
                      <div class="stat-label">{{ item.label }}</div>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="hover" class="overview-card">
                <template #header>
                  <div class="card-title">商机概览</div>
                </template>
                <el-row :gutter="10">
                  <el-col
                    :span="8"
                    v-for="(item, index) in [
                      { label: '总商机数', value: overviewData.businessTotal },
                      { label: '待分配商机数', value: overviewData.businessWaitAllot },
                      { label: '待跟进商机数', value: overviewData.businessWaitFollow },
                      { label: '跟进中商机数', value: overviewData.businessFollowing },
                      { label: '回收商机数', value: overviewData.businessFalse },
                      { label: '转客户商机数', value: overviewData.businessConvertCustomer },
                    ]"
                    :key="index"
                  >
                    <div class="stat-item">
                      <div class="stat-value">
                        <el-skeleton v-if="loading" animated :rows="1" style="width: 50%; margin: 0 auto;"></el-skeleton>
                        <span v-else>{{ item.value }}</span>
                      </div>
                      <div class="stat-label">{{ item.label }}</div>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 功能快捷入口 -->
        <div class="quick-access-section">
          <el-row :gutter="20">
            <el-col
              :span="4"
              v-for="(item, index) in [
                {
                  title: '课程管理',
                  desc: '课程信息维护',
                  icon: 'DocumentCopy',
                },
                { title: '活动管理', desc: '营销活动管理', icon: 'Calendar' },
                { title: '线索管理', desc: '潜在客户追踪', icon: 'User' },
                {
                  title: '商机管理',
                  desc: '销售机会管理',
                  icon: 'BellFilled',
                },
                {
                  title: '客户管理',
                  desc: '客户信息维护',
                  icon: 'CollectionTag',
                },
                {
                  title: '日志统计',
                  desc: '系统操作日志',
                  icon: 'DataAnalysis',
                },
              ]"
              :key="index"
            >
              <el-card shadow="hover" class="quick-access-card">
                <div class="quick-access-content">
                  <el-icon class="quick-access-icon"
                    ><component :is="item.icon"></component
                  ></el-icon>
                  <h3 class="quick-access-title">{{ item.title }}</h3>
                  <p class="quick-access-desc">{{ item.desc }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
  </div>
</template>

<style scoped>
.home-view {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  min-height: 100%;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  color: #303133;
  font-weight: 500;
  text-align: center;
}

.error-message {
  color: #f56c6c;
  text-align: center;
  margin-top: 10px;
  padding: 8px;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
}

/* 数据概览区域样式 */
.overview-card {
  margin-bottom: 20px;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  text-align: center;
}

.stat-item {
  background-color: #fafafa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px 10px;
  text-align: center;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 12px;
  color: #606266;
}

/* 快捷入口样式 */
.quick-access-card {
  height: 100%;
}

.quick-access-content {
  text-align: center;
  padding: 20px 0;
}

.quick-access-icon {
  font-size: 32px;
  color: #409eff;
  margin-bottom: 10px;
}

.quick-access-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 5px;
}

.quick-access-desc {
  font-size: 12px;
  color: #606266;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .home-view {
    padding: 10px;
  }
}
</style>
